<template>
  <div>
    <h1>测试1</h1>
		
    <div v-debounce:[time]="debounceFunc">这是测试页。。。。</div>
		父级<input v-model='val' v-debounce:[time]='search'/>{{val}}
		<div style="border: 1px solid #ddd;">
			<component-a :val.sync='val' ref='componentA'>
			<template v-slot:header='{obj}'>
				<h3>测试修饰符{{obj.title}}</h3>
			</template>
			<template #footer>
				<div>
					<button>保存</button>
					<button>取消</button>
				</div>
			</template>
		</component-a>

		<input type="text" v-model="dep">
		<br/>
		<input type="text" v-model="dep">
		</div>
		
  </div>
</template>
<script>
import { mapState } from 'vuex';
import Vue from 'vue'
import componentA from './componetA.vue'
export default {
  components: {
    componentA
  },
	created(){
		console.log('created')
	},
	activated() {
		console.log('activated')
	},
	deactivated() {
		console.log('deactivated')
	},
  mounted() {
		debugger
		const dragDom = this.$refs.componentA.$el;
		// dragHandle(dragDom)
		function dragHandle(drag) {
			drag.style.position = 'absolute';
			drag.style.zIndex = '9999';
			//当鼠标按下时
			drag.onmousedown = e => {
				//做到浏览器兼容
				e = e || window.event  
				let diffX = e.clientX - drag.offsetLeft
				let diffY = e.clientY - drag.offsetTop
				//当拉着box移动时
				document.onmousemove = e => {
					// 浏览器兼容
					e = e || window.event;
					let left = e.clientX - diffX;
					let top = e.clientY - diffY;
					drag.style.left = left + 'px';
					drag.style.top = top + 'px';
				}
				// 当鼠标抬起时
				document.onmouseup = function() {
					this.onmousemove = null
					this.onmouseup = null
				}
			}
		}
		console.log('mounted')
		window._this = this;
    $Message.success("欢迎你！"+this.userName)

		var obj = {
			name: '张三',
			age: 12
		}
		Object.defineProperty(obj,'name', {
			get: function() {
				console.log('read')
			},
			set: function() {
				console.log('write')
			},
			
		})
		obj.name=12
  },
  computed: {
		
    ...mapState(['userName'])
  },
  data() {
    return {
			val: '1',
			data1: 'a1',
			time:1000,
			dep: 'china'
    }
  },
	methods:{
		search() {
			console.log(1111,this.val);
		},
		func() {
			console.log('data', arguments);
		},
		debounceFunc() {
			console.log('data', arguments);
		},
	},
	directives: {
		debounce:{
			inserted(el, binding) {
				let timer;
				let delay = binding.arg || 500;
				el.addEventListener('click', () => {
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(() => {
						binding.value()
					}, delay)
				})
			},
		},
		dragV: {
			bind(drag, binding, vNode) {
				drag.style.position = 'absolute';
				drag.style.zIndex = '9999';
				//当鼠标按下时
				drag.onmousedown = e => {
					//做到浏览器兼容
					e = e || window.event  
					let diffX = e.clientX - drag.offsetLeft
					let diffY = e.clientY - drag.offsetTop
					//当拉着box移动时
					document.onmousemove = e => {
						// 浏览器兼容
						e = e || window.event;
						let left = e.clientX - diffX;
						let top = e.clientY - diffY;



						drag.style.left = left + 'px';
						drag.style.top = top + 'px';
					}
					// 当鼠标抬起时
					document.onmouseup = function() {
						this.onmousemove = null
						this.onmouseup = null
					}
				}
			}
		},
		test: {
			inserted(el, binding, vnode) {
				// 获取参数
				console.log('test',binding.arg);
				// 执行传递的函数
				binding.value({success: true,data:{}});
			},
		},
		// test: {
		// 	// bind(el, binding, vnode){
		// 	// 	console.log(1,'加载',el, binding, vnode)
		// 	// },
		// 	inserted(el, binding, vnode) {
		// 		// 获取参数
		// 		const {data1, data2} = binding;
		// 		// 执行传递的匿名函数
		// 		binding.value();
		// 		// 执行传递的具名函数
		// 		binding.value.func();

		// 	},
		// 	// update(el, binding,oldVnode) {
		// 	// 	console.log(3,'更新前',el, binding,oldVnode)
		// 	// },
		// 	// componentUpdated(el, binding,oldVnode) {
		// 	// 	console.log(4,'更新后',el, binding,oldVnode)
		// 	// },
		// 	bubind(el) {
		// 		console.log(5,'解绑',el);
		// 	},
		// },
	}
};
</script>

<style lang="less" scoped>

</style>